<template>
    <view  :style="' background-color:'+item.style.bgColor+';padding:'+(item.style.paddingTop*2)+'rpx '+(item.style.paddingLeft*2)+'rpx; '">
		<view v-if="item.style.isroll==0" class="magic1">
			<view
				v-for="(image,index) in item.data.image"
				:key="index"
				@click="toAdJump(index)"
				class="magic1_box"
				:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
			>
				<image slot='image' :src="image.url" class="magic1_box_img magic_img" mode="widthFix" :show-menu-by-longpress="show_menu"></image>
			</view>
		</view>
		
		<view v-if="item.style.isroll==1" class="magic2">
			<view 
				v-for="(image,index) in item.data.image"
				:key="index"
				@click="toAdJump(index)"
				class="magic2_box"
				:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
			>
				<image slot='image' :src="image.url" class="magic_img" mode="widthFix" :show-menu-by-longpress="show_menu"></image>
			</view>
		</view>
		
		<view v-if="item.style.isroll==2" class="magic3" :style="'margin:-'+(item.style.margin/4*2)+'rpx; height:347px;'">
		    <view class="magic3_left">
		        <view
					class="magic3_box"
					@click="toAdJump(0)"
					v-if="item.data.image[0].url"
					:style="'height:calc(100% - '+(item.style.margin)+'rpx);border-radius:'+(item.style.borderRadius*2)+'rpx;margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic3_box_img magic_img" mode="aspectFill" :src="item.data.image[0].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		    </view>
		    <view class="magic3_right">
		        <view
					class="magic3_box"
					@click="toAdJump(1)"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic3_box_img magic_img" mode="aspectFill" :src="item.data.image[1].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		        <view 
					class="magic3_box"
					@click="toAdJump(2)"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic3_box_img magic_img" mode="aspectFill" :src="item.data.image[2].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		    </view>
		</view>
		
		<view v-if="item.style.isroll==4" class="magic4 magic4_top">
		    <view class="magic4_left">
		        <view 
					v-if="item.data.image[0]"
					@click="toAdJump(0)"
					class="magic4_box"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic4_box_img magic_img" mode="widthFix" :src="item.data.image[0].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		        <view 
					v-if="item.data.image[1]"
					@click="toAdJump(1)"
					class="magic4_box"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic4_box_img magic_img" mode="widthFix" :src="item.data.image[1].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		    </view>
		    <view class="magic4_right">
		        <view
					v-if="item.data.image[2]"
					@click="toAdJump(2)"
					class="magic4_box"
					:style="'height:calc(100% - '+(item.style.margin)+'rpx);border-radius:'+(item.style.borderRadius*2)+'rpx;margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic4_box_img magic_img" mode="widthFix" :src="item.data.image[2].url" :show-menu-by-longpress="show_menu"></image>
				</view>
		    </view>
		</view>	
		
		<div v-if="item.style.isroll==5" class="magic5 magic5_top">
		    <div class="magic5_left">
		        <div 
					v-if="item.data.image[0]"
					@click="toAdJump(0)"
					class="magic5_box"
					:style="'height:calc(100% - '+(item.style.margin)+'rpx);border-radius:'+(item.style.borderRadius*2)+'rpx;margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic4_box_img magic_img" mode="widthFix" :src="item.data.image[0].url" :show-menu-by-longpress="show_menu"></image>
				</div>
		    </div>
		    <div class="magic5_right">
		        <div 
					v-if="item.data.image[1]"
					@click="toAdJump(1)"
					class="magic5_box"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic5_box_img magic_img" mode="widthFix" :src="item.data.image[1].url" :show-menu-by-longpress="show_menu"></image>
				</div>
		        <div 
					v-if="item.data.image[2]"
					@click="toAdJump(2)"
					class="magic5_box"
					:style="'border-radius:'+(item.style.borderRadius*2)+'rpx; margin:'+(item.style.margin/4*2)+'rpx;'"
				>
		            <image class="magic5_box_img magic_img" mode="widthFix" :src="item.data.image[2].url" :show-menu-by-longpress="show_menu"></image>
				</div>
		    </div>
		</div>
		
    </view>
</template>
<script>
	export default {
		props: ['item'],
		data() {
			return {
				show_menu:false,
			};
		},
		watch: {
		},
		computed: {
		},
		mounted(){
			this.show_menu=this.$config.common.show_img_menu==1?true:false;
		},
		methods: {
			toAdJump(e){
				let item =  this.item.data.image[e];
				this.$c.adJump(item,this.$config)
			},
		}
	};
</script>
<style lang="scss">
	.magic_img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.magic1{
	        display: flex;
	    }
	    .magic1_box{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic1_box_img{
	        width: 100%;
	        height: 100%;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        -o-object-fit: cover;
	        object-fit: cover;
	        display: block;
	    }
	    .magic2{
	        display: flex;
	    }
	    .magic2_box{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
			align-items: center;
	    }
	    .magic2_box_img{
	        width: 100%;
	        height: 100%;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        -o-object-fit: cover;
	        object-fit: cover;
	        display: block;
	    }
	    .magic3{
	        display: flex;
	    }
	    .magic3_left{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic3_right{
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        display: -webkit-box;
	        display: -ms-flexbox;
	        display: flex;
	        overflow: hidden;
	        -webkit-box-orient: vertical;
	        -webkit-box-direction: normal;
	        -ms-flex-direction: column;
	        flex-direction: column;
	    }
	    .magic3_box{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic3_box_img{
	        width: 100%;
	        height: 100%;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        -o-object-fit: cover;
	        object-fit: cover;
	        display: block;
	    }
	    .magic4{
	        display: flex;
	    }
	    .magic4_top{
	        -webkit-box-orient: vertical;
	        -webkit-box-direction: normal;
	        -ms-flex-direction: column;
	        flex-direction: column;
	    }
	    .magic4_left{
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        display: -webkit-box;
	        display: -ms-flexbox;
	        display: flex;
	        overflow: hidden;
	    }
	    .magic4_right{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic4_box{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic4_box_img{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	
	    .magic5{
	        display: flex;
	    }
	    .magic5_top{
	        -webkit-box-orient: vertical;
	        -webkit-box-direction: normal;
	        -ms-flex-direction: column;
	        flex-direction: column;
	    }
	    .magic5_left{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic5_right{
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        display: -webkit-box;
	        display: -ms-flexbox;
	        display: flex;
	        overflow: hidden;
	    }
	    .magic5_box{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	    .magic5_box_img{
	        position: relative;
	        -webkit-box-flex: 1;
	        -ms-flex: 1;
	        flex: 1;
	        border-radius: 6px;
	        overflow: hidden;
	    }
	.hide-button{
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #fff;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.hide-button::after{
		border: 0;
		background-color: none;
	}
</style>

